<template>
  <div id="login_two">
    <div @click="back" class="back"><van-icon name="arrow-left" />返回</div>
    <p class="tit">账号密码登录</p>
    <div class="cont">
      <div class="cli" @click="change">
        <transition name="van-slide-up">
          <div id="full" v-show="visible">
            <div class="full_cont">登录前请先勾选</div>
            <div class="san_bot"></div>
            <div class="san_top"></div>
          </div>
        </transition>
        <van-icon class="vi" v-if="!van" name="passed" />
        <van-icon class="vi vc" v-else name="checked" />
      </div>
      已详读并同意 <span>豆瓣使用协议、个人信息保护政策</span>
      <van-icon @click="cleartext" v-show="clear" class="clear" name="clear" />
      <input
        @input="textblur"
        type="text"
        v-model="input_top"
        placeholder="请输入用户名（手机号/邮箱）"
      />
      <p class="proof">{{ protext }}</p>
      <van-icon @click="input_eye" v-show="eye" class="eye" name="eye" />
      <input
        @input="passblur"
        ref="pass"
        type="password"
        v-model="input_bot"
        placeholder="请输入密码（8-16位）"
      />

      <p class="proof">{{ propass }}</p>
      <button @click="login" ref="but" :disabled="disabled" class="login">
        登录
      </button>
      <div @click="$router.push('/reg')" id="reg">注册账号</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      van: false,
      clear: false,
      eye: false,
      input_top: "",
      input_bot: "",
      disabled: true,
      visible: false,
      time: null,
      protext: "",
      propass: "",
      time2: "",
      // username:"",
      // password:"",
      user:{
        username:"",
        password:"",
      }

    };
  },
  methods: {
    cueone() {
      if (
        (this.clear === true) &
        (this.eye === true) &
        (this.propass === "") &
        (this.protext === "")
      ) {
        this.$refs.but.style.backgroundColor = "#22c03a";
        this.disabled = false;
      } else {
        this.disabled = true;
        this.$refs.but.style.backgroundColor = "#B1E4B9";
      }
    },
    back() {
      this.$router.push("/login");
      this.$notify.clear();
    },
    //改变协议勾选状态
    change() {
      this.van = !this.van;
      if (this.van === true) {
        this.visible = false;
        clearTimeout(this.time);
      }
    },
    //验证
    textblur() {
      // const regE = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      // const regT = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/;
      // //验证用户名
      // if (!regT.test(this.input_top) & !regE.test(this.input_top)) {
      //   this.protext = "用户名有误";
      // } else {
      //   this.protext = "";
      // }
    },
    passblur() {
      // const regP = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      //
      // if (!regP.test(this.input_bot)) {
      //   this.propass = "密码有误";
      // } else {
      //   this.propass = "";
      // }
    },
    //点击图标清除input中的内容
    cleartext() {
      this.input_top = "";
    },
    //点击眼睛图标改变input框的type属性
    input_eye(e) {
      if (this.$refs.pass.type === "password") {
        this.$refs.pass.type = "text";
        e.target.style.color = "rgb(77, 74, 74)";
      } else {
        this.$refs.pass.type = "password";
        e.target.style.color = "#aaa";
      }
      this.$refs.pass.focus();
    },
    //登录触发的事件
    login() {
      //防抖
      if (this.time !== null) {
        clearTimeout(this.time);
      }
      //如果协议没有勾选，弹框提示
      if (this.van === false) {
        this.visible = true;
        this.time = setTimeout(() => {
          this.visible = false;
        }, 2000);
      }
      //发送请求
      else {
        this.user.username=this.input_top;
        this.user.password=this.input_bot;
        //{username: this.input_top,password: this.input_bot,}
        this.$http.post("/cell/login",this.user)
          .then((res) => {
            console.log(res)
            // if (res.data.message === undefined) {
            //   res.data.message = "登录成功";
            //   sessionStorage.setItem("token", res.data.token);
            // }
            this.$notify({
              type: "success",
              message: res.data.msg,
              duration: 800,
            });
            if (this.time2 != null) {
              clearTimeout(this.time2);
            }
            this.time2 = setTimeout(() => {
              if (res.data.code === 2000) {
                sessionStorage.setItem("token", res.data.data);
                this.$router.push("/index");
              }
            }, 1000);
          });
      }
    },
  },
  watch: {
    //监听用户名
    input_top() {
      if (this.input_top) {
        this.clear = true;
        this.cueone();
      } else {
        this.clear = false;
        this.protext = "";
      }
    },
    //监听密码
    input_bot() {
      if (this.input_bot) {
        this.eye = true;
        this.cueone();
      } else {
        this.eye = false;
        this.propass = "";
      }
    },
  },
};
</script>

<style>
</style>